<template>
  <div style="padding: 10px; overflow: auto">
    <a-tabs
        style="background: #ffff; height: 100%"
        v-model:activeKey="activeKey"
    >
      <template #rightExtra>
        <a-space>
          <!--          到时候也要加权限-->
          <a-button
              type="primary"
              ghost
              @click="addCustomer"
              v-permission="['clueManagement','curd','getCustomerByData']"

          >大数据获客
          </a-button
          >
          <a-button
              type="primary"
              ghost
              v-permission="['clueManagement','curd','getClueField']"
              @click="showChannelConfig"
          >提交线索字段配置
          </a-button
          >
          <a-button
              type="primary"
              v-if="activeKey == 'pool' && role == 1"
              ghost
              @click="poolRule"
          >公海规则
          </a-button
          >
          <a-button
              type="primary"
              v-if="(activeKey == 'all'||activeKey == 'my')&&role=='1'"
              ghost
              @click="showConfig=true"
          >线索配置
          </a-button
          >
        </a-space>
      </template>

      <a-tab-pane key="my" tab="我的线索">
        <MyClue
            sourceType="my"
            :activeKey="activeKey"
            :optionsClueFrom="optionsClueFrom"
            :optionsBuild="optionsBuild"
            :clueSource="clueSource"
            :optionsStatus="optionsStatus"
        />
      </a-tab-pane>
      <a-tab-pane key="all" tab="全部线索" v-if="role == 1">
        <AllClue
            :activeKey="activeKey"
            :optionsClueFrom="optionsClueFrom"
            :optionsBuild="optionsBuild"
            :clueSource="clueSource"
            :optionsStatus="optionsStatus"
            :refresh="refresh"
        />
      </a-tab-pane>
      <a-tab-pane key="pool" tab="线索公海">
        <ClueOpenSea
            :activeKey="activeKey"
            :role="role == 1 ? 'manage' : 'user'"
            :optionsClueFrom="optionsClueFrom"
            :optionsBuild="optionsBuild"
            :clueSource="clueSource"
            :optionsStatus="optionsStatus"
        />
      </a-tab-pane>
      <a-tab-pane key="approvalIng" tab="审核中" v-if="isOpenApproval">
        <MyClue
            sourceType="approvalIng"
            :activeKey="activeKey"
            :optionsClueFrom="optionsClueFrom"
            :optionsBuild="optionsBuild"
            :optionsStatus="optionsStatus"
        />
      </a-tab-pane>
      <a-tab-pane key="status" tab="跟进状态" v-if="role == 1">
        <FollowUpStatus :activeKey="activeKey"/>
      </a-tab-pane>
    </a-tabs>


    <AddPoolRule
        :visible="showAddRule"
        @handleClose="() => (showAddRule = false)"
        @commit="poolRuleChange"
    />

    <ClueConfig :visible="showConfig" @handleClose="closeConfig"
    />

    <!--  配置  -->
    <ChannelCustomerConfig :visible="configVisible" @toClose="configVisible=false"/>


  </div>
</template>

<script>
import {defineComponent, ref, reactive, toRefs, watch, onActivated, computed} from "vue";
import MyClue from "./modules/MyClue.vue";
import AllClue from "./modules/AllClue.vue";
import ClueOpenSea from "./modules/ClueOpenSea.vue";
import FollowUpStatus from "./modules/FollowUpStatus.vue";
import AddPoolRule from "./modules/AddPoolRule.vue";
import request from "../../../common/utils/request";
import store from "@/store";
import ClueConfig from "./modules/ClueConfigModal.vue"
import ChannelCustomerConfig from '@/views/village/BusinessManage/modules/ChannelCustomerConfig.vue'
import {useRouter} from "vue-router";

export default defineComponent({
  name: "newClueManagement",
  components: {
    ChannelCustomerConfig,
    AllClue,
    MyClue,
    ClueOpenSea,
    FollowUpStatus,
    AddPoolRule,
    ClueConfig
  },
  setup() {
    const state = reactive({
      list: [],
      itemList: [],
      showConfig: false,
      clueSource: [],
    });


    const activeKey = ref("my");
    const showAddRule = ref(false);
    const poolRule = () => {
      showAddRule.value = true;
    };

    const role = ref(1); //1招商领导 2招商专员
    const getRole = () => {
      request
          .get("/org", "/business/customerTeam/UserRoleInfo", {})
          .then((res) => {
            let level = store.getters.userInfo.level;
            if (res.role == 1 || level == 99) {
              role.value = 1;
            } else {
              role.value = 2;
            }
          });
    };


    const refresh = ref(0);
    const poolRuleChange = () => {
      // 公海规则改版去刷新界面
      refresh.value = 1;
      showAddRule.value = false;
    };

    // 线索来源
    const optionsClueFrom = ref([]);
    const getClueFrom = () => {
      request.get("/org", "/user/clue/getSourceList").then((res) => {
        // console.log(res.data.clueFromData);
        const clueFromData = res?.data?.clueFromData;
        Object.keys(clueFromData).forEach((key) => {
          optionsClueFrom.value.push({
            label: clueFromData[key],
            value: key,
          });
        });
        // 来源
        state.clueSource = res?.data?.clueSourceData.map(item => {
          return {
            value: item.key,
            label: item.value,
          }
        })
      });
    };


    // 意向项目
    const optionsBuild = ref([]);
    const getVillageList = () => {
      request
          .get("/org", "/build/villageAndBuildList/v2", {checked: 1})
          .then((res) => {
            let vList = [];
            res.villageList.forEach((item) => {
              vList.push({
                label: item.name,
                value: item.id,
              });
            });
            optionsBuild.value = vList;
          });
    };

    //线索状态
    const optionsStatus = ref([]);
    const getStatusList = () => {
      request.get("/org", "/business/clueStatus/clueStatusList").then((res) => {
        console.log(res);
        const temList = res.list.map((item) => {
          return {
            label: item.name,
            value: item.status,
          };
        });
        optionsStatus.value = temList;
      });
    };


    const isOpenApproval = ref(false);

    const refConfig = () => {
      store.dispatch("GET_BUSINESS_CONFIG")
      setTimeout(() => {
        isOpenApproval.value = store.getters.clueConfig;
      }, 500)
    }

    const closeConfig = () => {
      state.showConfig = false
      refConfig()
    }

    const init = () => {
      getRole();
      getVillageList()
      getStatusList();
      getClueFrom();
      refConfig();
    }

    onActivated(() => {
      init();
    });

    const configVisible = ref(false)
    const showChannelConfig = () => {
      configVisible.value = true
    }

    const $router = useRouter()
    const addCustomer = () => {
      $router.push({
        name: "attractingCustomers"
      })
    }

    return {
      ...toRefs(state),
      activeKey,
      poolRule,
      showAddRule,
      poolRuleChange,
      refresh,
      role,
      optionsClueFrom,
      optionsBuild,
      optionsStatus,
      closeConfig,
      isOpenApproval,
      configVisible,
      showChannelConfig,
      addCustomer
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-tabs-content) {
  height: 100%;
}

:deep(.ant-tabs-nav) {
  padding: 0 10px;
}
</style>
